<template>
	<div id="pipeline">
		<!-- <get_data ref="get_data" req="false" v-on:devops_init_ok="devops_init_ok"></get_data> -->
		<el-row>
			<el-col :xs="24" :sm="24" :lg="24" class="primary">流水线</el-col>
		</el-row>
		<el-row>
			<el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
		</el-row>

		<el-row>
			<el-col :xs="24" :sm="24" :lg="24">
				<datepickersummary></datepickersummary>
			</el-col>
		</el-row>

		<!-- <div class="ibox-content" style="margin-left:0px; margin-right:0px;">
			<el-row :gutter="30">
				<el-col :xs="24" :sm="24" :lg="6">
					<info_label
						:type="common.avg"
						:title="'Git log检查时长'"
						:num="formatSeconds(summary.git_log_avg_time)"
						:sub="common.subs[1]"
						:to_sub="common.to_sub"
						:cls="common.success"
					></info_label>
				</el-col>
				<el-col :xs="24" :sm="24" :lg="6">
					<info_label
						:type="common.avg"
						:title="'代码规范检查'"
						:num="formatSeconds(summary.code_style_avg_time)"
						:sub="common.subs[1]"
						:to_sub="common.to_sub"
						:cls="common.success"
					></info_label>
				</el-col>
				<el-col :xs="24" :sm="24" :lg="6">
					<info_label
						:type="common.avg"
						:title="'代码静态检查'"
						:num="formatSeconds(summary.code_static_avg_time)"
						:sub="common.subs[1]"
						:to_sub="common.to_sub"
						:cls="common.success"
					></info_label>
				</el-col>
			</el-row>

			<div class="tab-container" v-if="Object.keys(summary).length !== 0">
				<el-tabs v-model="activeName" type="border-card">
					<el-tab-pane label="Daily-build" name="first">
						<el-row :gutter="30">
							<el-col :xs="24" :sm="24" :lg="6">
								<info_label_compare
									:params="generate_label_params(summary.daily_build.avg_time, [true, 240], 'time', common.titles[8], common.avg)"
									:to_sub="common.to_sub + ' (目标>=4小时)'"
									:sub="common.subs[1]"
								></info_label_compare>
							</el-col>
							<el-col :xs="24" :sm="24" :lg="6">
								<info_label_compare
									:params="generate_label_params(summary.daily_build.success_rate, [true, 80], 'percent', common.titles[27], common.avg)"
									:to_sub="common.to_sub + ' (目标>=80%)'"
									:sub="common.subs[7]"
								></info_label_compare>
							</el-col>
							<el-col :xs="24" :sm="24" :lg="6">
								<info_label_compare
									:params="generate_label_params(summary.daily_build.avg_count, [false, 1], 'frequency', common.titles[45], common.avg)"
									:to_sub="common.to_sub + ' (目标<=1次)'"
									:sub="common.subs[0]"
								></info_label_compare>
							</el-col>
						</el-row>
					</el-tab-pane>
					<el-tab-pane label="Submit-build" name="second">
						<el-row :gutter="30">
							<el-col :xs="24" :sm="24" :lg="6">
								<info_label_compare
									:params="generate_label_params(summary.submit_build.avg_time, [true, 240], 'time', common.titles[8], common.avg)"
									:to_sub="common.to_sub + ' (目标>=4小时)'"
									:sub="common.subs[1]"
								></info_label_compare>
							</el-col>
							<el-col :xs="24" :sm="24" :lg="6">
								<info_label_compare
									:params="generate_label_params(summary.submit_build.success_rate, [true, 80], 'percent', common.titles[27], common.avg)"
									:to_sub="common.to_sub + ' (目标>=80%)'"
									:sub="common.subs[7]"
									:cls="common.info"
								></info_label_compare>
							</el-col>
							<el-col :xs="24" :sm="24" :lg="6">
								<info_label_compare
									:params="generate_label_params(summary.submit_build.avg_count, [true, 9], 'frequency', common.titles[45], common.avg)"
									:to_sub="common.to_sub + ' (目标>=9次)'"
									:sub="common.subs[0]"
								></info_label_compare>
							</el-col>
						</el-row>
					</el-tab-pane>
					<el-tab-pane label="Verify-build" name="third">
						<el-row :gutter="30">
							<el-col :xs="24" :sm="24" :lg="6">
								<info_label_compare
									:params="generate_label_params(summary.verify_build.avg_time, [true, 240], 'time', common.titles[8], common.avg)"
									:to_sub="common.to_sub + ' (目标>=4小时)'"
									:sub="common.subs[1]"
								></info_label_compare>
							</el-col>
							<el-col :xs="24" :sm="24" :lg="6">
								<info_label_compare
									:params="generate_label_params(summary.verify_build.success_rate, [true, 80], 'percent', common.titles[27], common.avg)"
									:to_sub="common.to_sub + ' (目标>=80%)'"
									:sub="common.subs[7]"
								></info_label_compare>
							</el-col>
							<el-col :xs="24" :sm="24" :lg="6">
								<info_label_compare
									:params="generate_label_params(summary.verify_build.avg_count, [false, 3], 'frequency', common.titles[45], common.avg)"
									:to_sub="common.to_sub + ' (目标<=3次)'"
									:sub="common.subs[0]"
								></info_label_compare>
							</el-col>
						</el-row>
					</el-tab-pane>
					<el-tab-pane label="Release-build" name="fourth">
						<el-row :gutter="30">
							<el-col :xs="24" :sm="24" :lg="6">
								<info_label_compare
									:params="generate_label_params(summary.release_build.avg_time, [true, 240], 'time', common.titles[8], common.avg)"
									:to_sub="common.to_sub + ' (目标>=4小时)'"
									:sub="common.subs[1]"
								></info_label_compare>
							</el-col>
							<el-col :xs="24" :sm="24" :lg="6">
								<info_label_compare
									:params="generate_label_params(summary.release_build.success_rate, [true, 80], 'percent', common.titles[27], common.avg)"
									:to_sub="common.to_sub + ' (目标>=80%)'"
									:sub="common.subs[7]"
								></info_label_compare>
							</el-col>
							<el-col :xs="24" :sm="24" :lg="6">
								<info_label_compare
									:params="generate_label_params(summary.release_build.avg_count, [false, 1], 'frequency', common.titles[45], common.avg)"
									:to_sub="common.to_sub + ' (目标<=1次)'"
									:sub="common.subs[0]"
								></info_label_compare>
							</el-col>
						</el-row>
					</el-tab-pane>
				</el-tabs>
			</div>

		</div>-->
		<el-row style="background: #fff;padding:20px 0;margin-bottom:20px;" v-if="stepData.length">
			<el-row style="padding:0 50px 40px">
				<el-col :span="12">
					<div style="line-height:50px">patch号：{{stageInfo.patch}}</div>
				</el-col>
				<el-col :span="12">
					<div style="line-height:50px">提交者：{{stageInfo.create_name}}</div>
				</el-col>
				<el-col :span="12">
					<div style="line-height:50px">提交时间：{{stageInfo.create_time}}</div>
				</el-col>
			</el-row>
			<el-steps :active="stepData.length" align-center>
				<el-step
					style="cursor:pointer"
					v-for="(data, index) in stepData"
					:title="data.stage_name"
					:key="index"
					:class="data.stage_status==0?'stepGrey':(data.stage_status==1?'stepRed':'stepGreen')"
				>
					<template slot="description">
						<span v-if="index != 0">平均运行时间：{{data.cost_time | formatSeconds}}</span>
						<el-steps
							direction="vertical"
							:space="80"
							:active="data.children_list?data.children_list.length:''"
						>
							<el-step
								v-for="(data1, index1) in data.children_list"
								:key="index1"
								:class="data1.event_status==0?'stepGrey':(data1.event_status==1?'stepRed':'stepGreen')"
							>
								<template slot="description">
									<div style="font-size: 16px">{{data1.event_name}}</div>
									<div v-if="index != 0 || index1 != 0" style="font-weight: lighter">平均运行时间：{{data1.cost_time | formatSeconds}}</div>
								</template>
								<template slot="icon">
									<i class="el-icon-minus" v-if="data1.event_status == 0"></i>
									<i class="el-icon-close" v-if="data1.event_status == 1"></i>
									<i class="el-icon-check" v-if="data1.event_status == 2"></i>
								</template>
							</el-step>
						</el-steps>
					</template>
					<template slot="icon">
						<i class="el-icon-minus" v-if="data.stage_status == 0"></i>
						<i class="el-icon-close" v-if="data.stage_status == 1"></i>
						<i class="el-icon-check" v-if="data.stage_status == 2"></i>
					</template>
				</el-step>
			</el-steps>
		</el-row>
		<el-dialog title="详情步骤" :visible.sync="dialogFormVisible" :append-to-body="true">
			<div style="margin-left: 100px">
				<el-steps :active="summaryDetail.length" align-center>
					<el-step
						style="cursor:pointer"
						v-for="(data, index) in summaryDetail"
						:title="data.stage_name"
						:key="index"
						:class="data.stage_status==0?'stepGrey':(data.stage_status==1?'stepRed':'stepGrey')"
					>
						<template slot="description">
							<span v-if="index != 0">平均运行时间：{{data.cost_time | formatSeconds}}</span>
							<el-steps
								direction="vertical"
								:space="80"
								:active="data.children_list?data.children_list.length:''"
							>
								<el-step
									v-for="(data1, index1) in data.children_list"
									:key="index1"
									:class="data1.event_status==0?'stepGrey':(data1.event_status==1?'stepRed':'stepGrey')"
								>
									<template slot="description">
										<div style="font-size: 16px">{{data1.event_name}}</div>
										<div v-if="index != 0 || index1 != 0" style="font-weight: lighter">平均运行时间：{{data1.cost_time | formatSeconds}}</div>
									</template>
									<template slot="icon">
										<i class="el-icon-minus" v-if="data1.event_status == 0"></i>
										<i class="el-icon-close" v-if="data1.event_status == 1"></i>
										<i class="el-icon-check" v-if="data1.event_status == 2"></i>
									</template>
								</el-step>
							</el-steps>
						</template>
						<template slot="icon">
							<i class="el-icon-minus" v-if="data.stage_status == 0"></i>
							<i class="el-icon-close" v-if="data.stage_status == 1"></i>
							<i class="el-icon-check" v-if="data.stage_status == 2"></i>
						</template>
					</el-step>
				</el-steps>
			</div>
		</el-dialog>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span style="font-size:16px">流水线列表</span>
				<span style="font-size:14px;float: right;margin-right:20px;">总流水线：{{ total }}(个)</span>
			</div>
			<el-row>
				<el-form :inline="true">
					<el-col :span="12">
						<el-form-item label="分支名" label-width="150px">
							<el-select v-model="selectedBranch" placeholder="请选择分支名" clearable>
								<el-option v-for="(val, index) in branchArray" :key="index" :label="val" :value="val"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="当前节点" label-width="150px">
							<el-select v-model="selectedStage" placeholder="请选择阶段" clearable>
								<el-option v-for="(stage, index) in stageArray" :key="index" :label="stage" :value="stage"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row>
			<el-row style="margin-left:0px; margin-right:0px;">
				<el-table :data="tableData.msg" :stripe="true" style="width: 100%; margin-bottom: 40px;">
					<el-table-column type="expand">
						<template slot-scope="scope">
							<el-tree :data="scope.row.detail" :highlight-current="true" accordion>
								<span class="custom-tree-node" slot-scope="{ node, data }">
									<span>{{ node.label }}</span>
									<span>运行时间：{{ data.cost_time }}</span>
								</span>
							</el-tree>
						</template>
					</el-table-column>
					<el-table-column prop="pipeline_id" label="流水线id" sortable width="265"></el-table-column>
					<el-table-column label="分支名">
						<template slot-scope="scope">
							<div style="position: relative">
								<span v-if="scope.row.branch.length < 25">{{ scope.row.branch }}</span>
								<el-popover v-else width="300" trigger="hover" :content="scope.row.branch">
									<span slot="reference">{{ scope.row.branch.substring(0, 25) }}...</span>
								</el-popover>
							</div>
						</template>
					</el-table-column>
					<el-table-column class-name="result" label="运行时间">
						<template slot-scope="scope">
							<el-popover trigger="hover" placement="top">
								<p>开始时间: {{ scope.row.start_time }}</p>
								<p>结束时间: {{ scope.row.end_time }}</p>
								<div slot="reference" class="name-wrapper">
									<span>{{scope.row.current_cost_time}}</span>
								</div>
							</el-popover>
						</template>
					</el-table-column>
					<el-table-column prop="current_stage" label="当前节点" width="180" sortable></el-table-column>
					<el-table-column label="结果" width="100">
						<template slot-scope="scope">
							<el-button type="text" @click="checkDetail(scope.row)">查看详情</el-button>
							<el-dialog
								:visible.sync="dialogTableVisible"
								:modal="false"
								title="流水线详情"
								width="90%"
								:append-to-body="true"
							>
								<!-- <el-table
									:data="ridData.details"
									:header-cell-style="tableHeaderColor"
									max-height="550"
									style="margin-bottom: 40px;"
								>
									<el-table-column property="common_postbuild" label="推送编号" sortable width="110"></el-table-column>
									<el-table-column property="patch_set_id" label="Patchset ID" sortable width="130"></el-table-column>
									<el-table-column property="event_start" label="事件开始时间" sortable></el-table-column>
									<el-table-column property="event_end" label="事件结束时间" sortable></el-table-column>
									<el-table-column property="cost_time" label="花费时间" sortable></el-table-column>
									<el-table-column property="current_stage" label="节点名" width="120"></el-table-column>
									<el-table-column property="event_id" label="事件名"></el-table-column>
									<el-table-column property="result" label="结果"></el-table-column>
								</el-table>
								<el-pagination
									:hide-on-single-page="rideValue"
									style="text-align: center"
									@current-change="handleDialogChange"
									background
									layout="prev, pager, next"
									:total="ridData.count"
									:page-count="ridData.num_pages"
								></el-pagination>-->
								<el-row style="padding:0 50px 40px">
									<el-col :span="12">
										<div style="line-height:50px">patch号：{{detailStageInfo.patch}}</div>
									</el-col>
									<el-col :span="12">
										<div style="line-height:50px">提交者：{{detailStageInfo.create_name}}</div>
									</el-col>
									<el-col :span="12">
										<div style="line-height:50px">提交时间：{{detailStageInfo.create_time}}</div>
									</el-col>
								</el-row>
								<el-steps :active="ridData.length" align-center>
									<el-step
										style="cursor:pointer"
										v-for="(data, index) in ridData"
										:title="data.stage_name"
										:key="index"
										:class="data.stage_status==0?'stepGrey':(data.stage_status==1?'stepRed':'stepGreen')"
									>
										<template slot="description">
											<span v-if="index != 0">运行时间：{{data.cost_time | formatSeconds}}</span>
											<el-steps
												direction="vertical"
												:space="80"
												:active="data.children_list?data.children_list.length:''"
											>
												<el-step
													v-for="(data1, index1) in data.children_list"
													:key="index1"
													:class="data1.event_status==0?'stepGrey':(data1.event_status==1?'stepRed':'stepGreen')"
												>
													<template slot="description">
														<div style="font-size: 16px">{{data1.event_name}}</div>
														<div v-if="index != 0 || index1 != 0" style="font-weight: lighter">平均运行时间：{{data1.cost_time | formatSeconds}}</div>
													</template>
													<template slot="icon">
														<i class="el-icon-minus" v-if="data1.event_status == 0"></i>
														<i class="el-icon-close" v-if="data1.event_status == 1"></i>
														<i class="el-icon-check" v-if="data1.event_status == 2"></i>
													</template>
												</el-step>
											</el-steps>
										</template>
										<template slot="icon">
											<i class="el-icon-minus" v-if="data.stage_status == 0"></i>
											<i class="el-icon-close" v-if="data.stage_status == 1"></i>
											<i class="el-icon-check" v-if="data.stage_status == 2"></i>
										</template>
									</el-step>
								</el-steps>

								<div slot="footer" class="dialog-footer">
									<el-button @click="closeDialog">关闭</el-button>
								</div>
							</el-dialog>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					:hide-on-single-page="pageValue"
					style="text-align: center"
					@current-change="handleCurrentChange"
					background
					layout="prev, pager, next"
					:total="tableData.count"
					:page-count="tableData.num_pages"
				></el-pagination>
			</el-row>
		</el-card>
	</div>
</template>

<script>
import info_label from '@/components/devops/info_label.vue';
import info_label_compare from '@/components/devops/info_label_compare.vue';
import DatePickerSummary from '@/views/summary/DatePickerSummary';
import { mapState } from 'vuex';
import { getHeader } from '@/app.config';
// import get_data from '@/components/devops/get_data.vue';
export default {
	name: 'pipeline',
	data() {
		return {
			activeName: 'first',
			ridData: [],
			detailStageInfo: {},
			pageValue: true,
			rideValue: false,
			dialogTableVisible: false,
			branchArray: [],
			stageArray: [],
			dialogPipeLine: '',
			dialogBranch: '',
			selectedStage: '',
			selectedBranch: '',
			currentPage: 1,
			dialogPage: 1,
			tableData: [],
			summary: {},
			tabNum: 0,
			first: true,
			common: JSON.parse(localStorage.getItem('devops_common')),
			dialogFormVisible: false,
			stepData: [],
			summaryDetail: [],
			total: 0,
		};
	},
	components: {
		datepickersummary: DatePickerSummary,
		info_label,
		info_label_compare,
	},
	computed: {
		...mapState({
			filters: (state) => state.filters,
		}),
		project() {
			return this.filters.projectId;
		},
		projectName() {
			return this.filters.projectName;
		},
	},
	methods: {
		init_data: function () {
			this.get_pipeline_list(
				this.selectedBranch,
				this.selectedStage,
				this.currentPage
			);
			//this.get_label_summary(this.projectName);
			this.get_step_summary(this.projectName);
		},
		handleCurrentChange(val) {
			this.currentPage = val;
			this.get_pipeline_list(
				this.selectedBranch,
				this.selectedStage,
				this.currentPage
			);
		},
		get_label_summary(projectName) {
			var self = this;
			this.$axios
				.post(
					process.env.VUE_APP_KANBAN_HOST +
						'/api/devops/optimize_pipelines?project=' +
						projectName,
					{ headers: getHeader() }
				)
				.then(function (response) {
					self.summary = response.data;
				});
		},
		get_step_summary(projectName) {
			var self = this;
			this.$axios
				.post(
					process.env.VUE_APP_KANBAN_HOST + '/api/devops/optimize_pipelines',
					{ project: projectName },
					{ headers: getHeader() }
				)
				.then(function (response) {
					var summaryData = response.data.stage_summary
						? response.data.stage_summary
						: [];
					var summaryArr = [];
					if (summaryData) {
						summaryData.forEach((val) => {
							summaryArr.push({
								stage: val.stage_name,
								time: '平均运行时间：' + self.formatSeconds(val.cost_time),
							});
						});
					}

					console.log('summaryArr', summaryArr);
					self.stepData = summaryData;
					self.stageInfo = response.data.stage_info
					self.selectedBranch = ''
					self.selectedStage = ''
				});
		},
		get_pipeline_list(branch, stage, page) {
			var url =
				process.env.VUE_APP_KANBAN_HOST +
				'/api/devops/pipelines/table?project=' +
				this.projectName +
				'&branch=' +
				branch +
				'&stage=' +
				stage +
				'&page=' +
				page;
			var self = this;
			this.$axios.get(url, { headers: getHeader() }).then((response) => {
				if (response.data.status === 200) {
					var msg = self.handleCostTime(response.data);
					self.total = response.data.total;
					self.branchArray = response.data.branch_list;
					self.stageArray = response.data.stage_list;
					self.tableData = response.data;
					for (var i = 0; i < msg.length; i++) {
						let detail = msg[i].detail;
						let detailArr = [];
						detail.forEach((element) => {
							let childDetail = element.event_detail;
							let childArr = [];
							childDetail.forEach((ele) => {
								childArr.push({
									label: ele.event_name,
									cost_time: self.formatSeconds(ele.cost_time),
								});
							});
							let msgDict = {
								label: element.stage_name,
								cost_time: self.formatSeconds(element.cost_time),
								children: childArr,
							};
							detailArr.push(msgDict);
						});
						msg[i].detail = detailArr;
					}
					self.tableData.msg = msg;
					self.pageValue = false;
				} else {
					self.tableData = [];
					self.pageValue = true;
				}
			});
		},
		closeDialog() {
			this.dialogTableVisible = false;
			this.dialogPage = 1;
			this.dialogBranch = '';
			this.dialogPipeLine = '';
			this.ridData = [];
		},
		handleDialogChange(val) {
			this.dialogPage = val;
			this.getDetailData();
		},
		handleCostTime(data) {
			var msg_arr = data.details;
			var arr = [];
			for (var i = 0; i < msg_arr.length; i++) {
				if (msg_arr[i]['current_cost_time'] > 60) {
					msg_arr[i]['current_cost_time'] =
						Math.round(msg_arr[i]['current_cost_time']) +
						'秒' +
						'(' +
						this.formatSeconds(msg_arr[i]['current_cost_time']) +
						')';
				} else {
					msg_arr[i]['current_cost_time'] =
						Math.round(msg_arr[i]['current_cost_time']) + '秒';
				}
				arr.push(msg_arr[i]);
			}
			return arr;
		},
		getDetailData() {
			var self = this;
			var params = {
				project: this.projectName,
				branch: this.dialogBranch,
				pipeline_id: this.dialogPipeLine.replace('#', '%23'),
			};
			this.$axios
				.post(
					process.env.VUE_APP_KANBAN_HOST + '/api/devops/optimize_pipelines',
					params,
					{ headers: getHeader() }
				)
				.then(function (response) {
					var summaryData = response.data.stage_summary
						? response.data.stage_summary
						: [];
					var summaryArr = [];
					if (summaryData) {
						summaryData.forEach((val) => {
							summaryArr.push({
								stage: val.stage_name,
								time: '平均运行时间：' + self.formatSeconds(val.cost_time),
							});
						});
					}

					self.ridData = summaryData;
					self.detailStageInfo = response.data.stage_info
					self.dialogTableVisible = true;
				});
			// var self = this
			// this.$axios
			// 	.get(
			// 		process.env.VUE_APP_KANBAN_HOST +
			// 			'/api/devops/pipelines/details?project=' +
			// 			this.projectName +
			// 			'&branch=' +
			// 			this.dialogBranch +
			// 			'&pipeline_id=' +
			// 			this.dialogPipeLine.replace('#', '%23') +
			// 			'&page=' +
			// 			this.dialogPage, {headers: getHeader()}
			// 	)
			// 	.then(response => {
			// 		if (response.data.status === 200) {
			// 			this.ridData = response.data;
			// 			var msg_arr = response.data.details;
			// 			var arr = [];
			// 			for (var i = 0; i < msg_arr.length; i++) {
			// 				if (msg_arr[i]['cost_time'] > 60) {
			// 					msg_arr[i]['cost_time'] =
			// 						Math.round(msg_arr[i]['cost_time']) +
			// 						'秒' +
			// 						'(' +
			// 						this.formatSeconds(msg_arr[i]['cost_time']) +
			// 						')';
			// 				} else {
			// 					msg_arr[i]['cost_time'] =
			// 						Math.round(msg_arr[i]['cost_time']) + '秒';
			// 				}
			// 				if (msg_arr[i]['result'] === '+2') {
			// 					msg_arr[i]['result'] =
			// 						'通过' + '(' + msg_arr[i]['result'] + ')';
			// 				} else if (msg_arr[i]['result'] === '+1') {
			// 					msg_arr[i]['result'] =
			// 						'通过' + '(' + msg_arr[i]['result'] + ')';
			// 				} else if (msg_arr[i]['result'] === '0') {
			// 					msg_arr[i]['result'] =
			// 						'无效' + '(' + msg_arr[i]['result'] + ')';
			// 				} else if (msg_arr[i]['result'] === '-1') {
			// 					msg_arr[i]['result'] =
			// 						'带问题通过	' + '(' + msg_arr[i]['result'] + ')';
			// 				} else {
			// 					if (typeof msg_arr[i]['result'] == 'object') {
			// 						msg_arr[i]['result'] = JSON.stringify(msg_arr[i]['result']);
			// 					} else {
			// 						msg_arr[i]['result'] =
			// 							'不通过' + '(' + msg_arr[i]['result'] + ')';
			// 					}
			// 				}
			// 				arr.push(msg_arr[i]);
			// 			}
			// 			this.ridData.details = arr;
			// 			this.dialogTableVisible = true;
			// 			this.rideValue = false;
			// 		} else {
			// 			this.ridData = [];
			// 			this.rideValue = true;
			// 		}
			// 	});
		},
		checkDetail(row) {
			this.dialogPipeLine = row.pipeline_id;
			this.dialogBranch = row.branch;
			this.getDetailData();
		},
		tableHeaderColor({ row, column, rowIndex, columnIndex }) {
			if (rowIndex === 0) {
				return 'background-color: #23c6c8;color: #fff;';
			}
		},
		fomatFloat(src, pos) {
			return Math.round(src * Math.pow(10, pos)) / Math.pow(10, pos);
		},
		generate_label_params: function (val1, val2, dataType, dataTitle, label) {
			if (dataType === 'time') {
				var standardTime = val2[1] * 60;
				if (val1) {
					if (val2[0]) {
						var labelParam = {
							type: label,
							title: dataTitle,
							num: this.formatSeconds(val1),
							status: val1 > standardTime ? 'reach' : 'down',
							difference:
								val1 > standardTime
									? ''
									: this.formatSeconds(standardTime - val1),
						};
					} else {
						var labelParam = {
							type: label,
							title: dataTitle,
							num: this.formatSeconds(val1),
							status: val1 > standardTime ? 'up' : 'reach',
							difference:
								val1 > standardTime
									? this.formatSeconds(val1 - standardTime)
									: '',
						};
					}
				} else {
					var labelParam = {
						type: label,
						title: dataTitle,
						num: this.formatSeconds(val1),
						status: 'reach',
						difference: '',
					};
				}
				return labelParam;
			} else if (dataType === 'percent') {
				if (val1) {
					if (val2[0]) {
						var labelParam = {
							type: label,
							title: dataTitle,
							status: val1 > val2[1] ? 'reach' : 'down',
							difference:
								val1 > val2[1] ? '' : this.fomatFloat(val2[1] - val1, 2) + '%',
							num: this.fomatFloat(val1, 2),
						};
					} else {
						var labelParam = {
							type: label,
							title: dataTitle,
							status: val1 > val2[1] ? 'up' : 'reach',
							difference:
								val1 > val2[1] ? this.fomatFloat(val1 - val2[1], 2) + '%' : '',
							num: this.fomatFloat(val1, 2),
						};
					}
				} else {
					var labelParam = {
						type: label,
						title: dataTitle,
						status: 'reach',
						difference: '',
						num: this.fomatFloat(val1, 2),
					};
				}
				return labelParam;
			} else if (dataType === 'frequency') {
				if (val1) {
					if (val2[0]) {
						var labelParam = {
							type: label,
							title: dataTitle,
							num: this.fomatFloat(val1, 2),
							status: val1 > val2[1] ? 'reach' : 'down',
							difference:
								val1 > val2[1] ? '' : this.fomatFloat(val2[1] - val1, 2),
						};
					} else {
						var labelParam = {
							type: label,
							title: dataTitle,
							num: this.fomatFloat(val1, 2),
							status: val1 > val2[1] ? 'up' : 'reach',
							difference:
								val1 > val2[1] ? this.fomatFloat(val1 - val2[1], 2) : '',
						};
					}
				} else {
					var labelParam = {
						type: label,
						title: dataTitle,
						num: this.fomatFloat(val1, 2),
						status: 'reach',
						difference: '',
					};
				}
				return labelParam;
			} else if (dataType === 'multiple') {
				if (val1) {
					if (val2[0]) {
						var labelParam = {
							type: label,
							title: dataTitle,
							num: this.fomatFloat(val1, 2),
							status: val1 > val2[1] ? 'reach' : 'down',
							difference:
								val1 > val2[1] ? '' : this.fomatFloat(val2[1] - val1, 2),
						};
					} else {
						var labelParam = {
							type: label,
							title: dataTitle,
							num: this.fomatFloat(val1, 2),
							status: val1 > val2[1] ? 'up' : 'reach',
							difference:
								val1 > val2[1] ? this.fomatFloat(val1 - val2[1], 2) : '',
						};
					}
				} else {
					var labelParam = {
						type: label,
						title: dataTitle,
						num: this.fomatFloat(val1, 2),
						status: 'reach',
						difference: '',
					};
				}
				return labelParam;
			} else {
				var labelParam = {
					type: label,
					title: dataTitle,
					num: this.fomatFloat(val1, 2),
					status: 'reach',
					difference: '',
				};
				return labelParam;
			}
		},
		formatSeconds(value) {
			var theTime = parseInt(value); // 秒
			var theTime1 = 0; // 分
			var theTime2 = 0; // 小时
			var theTime3 = 0; // 天
			if (theTime > 60) {
				theTime1 = parseInt(theTime / 60);
				theTime = parseInt(theTime % 60);
				if (theTime1 > 60) {
					theTime2 = parseInt(theTime1 / 60);
					theTime1 = parseInt(theTime1 % 60);
					if (theTime2 > 24) {
						theTime3 = parseInt(theTime2 / 24);
						theTime2 = parseInt(theTime2 % 24);
					}
				}
			}
			var result = '' + parseInt(theTime) + '秒';
			// console.log(result)
			if (theTime1 > 0) {
				result = '' + parseInt(theTime1) + '分' + result;
			}
			if (theTime2 > 0) {
				result = '' + parseInt(theTime2) + '时' + result;
			}
			if (theTime3 > 0) {
				result = '' + parseInt(theTime3) + '天' + result;
			}
			return result;
		},
		activeTab(index) {
			this.tabNum = index;
		},
		devops_init_ok: function (project) {
			this.project = project;
		},
		stepClick: function (name) {
			if (this.dialogFormVisible) {
				this.dialogFormVisible = false;
			} else {
				let data = {
					project: this.projectName,
					stage_name: name,
				};
				var self = this;
				this.$axios
					.post(
						process.env.VUE_APP_KANBAN_HOST + '/api/devops/optimize_pipelines',
						data,
						{ headers: getHeader() }
					)
					.then(function (response) {
						let result = response.data.detail_summary;
						let resultArr = [];
						result.forEach((val) => {
							resultArr.push({
								event: val.event_name,
								time: '平均运行时间：' + self.formatSeconds(val.cost_time),
							});
						});
						self.summaryDetail = resultArr;
					});
				self.dialogFormVisible = true;
			}
		},
	},
	filters: {
		formatSeconds(value) {
			var theTime = parseInt(value); // 秒
			var theTime1 = 0; // 分
			var theTime2 = 0; // 小时
			var theTime3 = 0; // 天
			if (theTime > 60) {
				theTime1 = parseInt(theTime / 60);
				theTime = parseInt(theTime % 60);
				if (theTime1 > 60) {
					theTime2 = parseInt(theTime1 / 60);
					theTime1 = parseInt(theTime1 % 60);
					if (theTime2 > 24) {
						theTime3 = parseInt(theTime2 / 24);
						theTime2 = parseInt(theTime2 % 24);
					}
				}
			}
			var result = '' + parseInt(theTime) + '秒';
			if (theTime1 > 0) {
				result = '' + parseInt(theTime1) + '分' + result;
			}
			if (theTime2 > 0) {
				result = '' + parseInt(theTime2) + '时' + result;
			}
			if (theTime3 > 0) {
				result = '' + parseInt(theTime3) + '天' + result;
			}
			return result;
		},
	},
	watch: {
		// $route: function() {
		// 	this.$refs.get_data.init_data();
		// },
		filters: {
			handler: function () {
				this.init_data();
			},
			deep: true,
		},
		selectedBranch: function (val) {
			this.get_pipeline_list(val, this.selectedStage, this.currentPage);
		},
		selectedStage: function (val) {
			this.get_pipeline_list(this.selectedBranch, val, this.currentPage);
		},
	},
	mounted() {
		// this.init_data();
	},
};
</script>
<style lang="scss" scoped>
@import '../../assets/common/common.scss';

#pipeline {
	padding: 32px;
	background-color: rgb(240, 242, 245);
	position: relative;
}
.border {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
	margin-top: 1rem;
	margin-bottom: 1rem;
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.primary {
	color: #409eff;
	font-size: 30px;
	margin-top: 20px;
	margin-bottom: 10px;
	font-weight: 400;
}
.bgColor {
	background: #fff;
}
.pad {
	padding: 0 20px;
	padding-top: 20px;
}
.marT {
	margin-top: 20px;
}

#pipeline >>> .el-tabs--border-card {
	background: inherit;
}
.demo-table-expand {
	font-size: 0;
}
.demo-table-expand label {
	width: 90px;
	color: #99a9bf;
}
.demo-table-expand .el-form-item {
	margin-right: 0;
	margin-bottom: 0;
	width: 50%;
}
.custom-tree-node {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
}
.el-tree-node__content:hover {
	background-color: #409eff;
}
.stepRed > {
	/deep/.el-step__head .el-step__icon {
		background: red;
		color: white;
	}
	/deep/.el-step__head .el-step__icon.is-text {
		border-radius: 50%;
		border: 2px solid;
		border-color: red;
	}
	/deep/.el-step__head .el-step__icon-inner {
		font-size: 36px;
	}
}
.stepGreen > {
	/deep/.el-step__head .el-step__icon {
		background: green;
		color: white;
	}
	/deep/.el-step__head .el-step__icon.is-text {
		border-radius: 50%;
		border: 2px solid;
		border-color: green;
	}
	/deep/.el-step__head .el-step__icon-inner {
		font-size: 36px;
	}
}
.stepGrey > {
	/deep/.el-step__head .el-step__icon {
		background: grey;
		color: white;
	}
	/deep/.el-step__head .el-step__icon.is-text {
		border-radius: 50%;
		border: 2px solid;
		border-color: grey;
	}
	/deep/.el-step__head .el-step__icon-inner {
		font-size: 36px;
	}
}
/deep/.el-step.is-vertical .el-step__line {
	height: 100%;
}
</style>
